﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>EquipmentAdd</title>
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }

    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js?v=@DateTime.Now.Ticks" asp-append-version="true"></script>
    <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" src="~/lib/datatables/media/js/jquery.dataTables.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" src="~/lib/datatables/media/js/dataTables.bootstrap4.js?v=@DateTime.Now.Ticks"></script>

    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css?v=@DateTime.Now.Ticks">
    <link rel="stylesheet" type="text/css" href="~/lib/datatables/media/css/dataTables.bootstrap4.css?v=@DateTime.Now.Ticks">

    <style type="text/css">
        select, input {
            width: 12rem;
            font-size: 1rem;
            padding: 0.2em 0.3em;
            border-radius: 3px;
            color: #000000;
            background-color: #f8f9fa;
            border: 1px solid #0aa9cd;
        }

        select:hover {
            background-color: #eee;
            border: 1px solid #0bc4e9;
        }

        #body {
            background-color: white;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .bd-callout {
            padding: 1rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 1px solid #eee;
            border-left-width: 1px;
            border-left-color: rgb(238, 238, 238);
            border-left-width: 0.25rem;
            border-radius: 0.25rem;
            background-color: #f8f9fa;
        }
        .bd-callout-warning {
            border-left-color: #f0ad4e;
        }
        .table td {
            padding: 0.25rem;
        }
        #tablelist {
            width: 100vw;
            padding-right: 15px;
            padding-left: 15px;
            margin: 0 auto;
        }

        section {
            width: 100%;
        }

        #updateOrAddModal >.modal-dialog {
            max-width: 600px;
        }
        .label {
            padding-right: 0.95rem;
            margin-bottom: 10px !important;
        }
        .vaule {
            padding-right: 1.65rem;
            margin-bottom: 10px !important;
        }
        #tableUp0rAdd > tbody > tr {
            border-bottom: 0.65rem solid transparent;
        }

        /* 滚动条整体样式 */
        /* WebKit browsers */
        ::-webkit-scrollbar {
            /* 横向滚动条的宽度 */
            width: 6px;
            /* 纵向滚动条的高度 */
            height: 6px;
            background-color: rgba(236, 236, 236, 0.1);
        }

        /* 滚动条里面深色条 */
        ::-webkit-scrollbar-thumb {
            /* 深色条的背景颜色 */
            background: #007bff;
            /* 深色条的圆角 */
            border-radius: 6px;
            /* 深色条的阴影效果 */
            box-shadow: inset 0 0 6px rgba(236, 236, 236, 0.1);
        }

        /* 滚动条里面轨道 */
        ::-webkit-scrollbar-track {
            /* 轨道的背景颜色 */
            background: #ededed;
            /* 轨道的圆角 */
            border-radius: 6px;
            /* 轨道的阴影效果 */
            box-shadow: inset 0 0 6px rgba(236, 236, 236, 0.1);
        }

        /* Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: #007bff rgba(236, 236, 236, 0.1);
        }

        ::-moz-scrollbar {
            /* 横向滚动条的宽度 */
            width: 6px;
            /* 纵向滚动条的高度 */
            height: 6px;
            background-color: rgba(236, 236, 236, 0.1);
        }

        ::-moz-scrollbar-track {
            /* 轨道的背景颜色 */
            background: #ededed;
            /* 轨道的圆角 */
            border-radius: 6px;
            /* 轨道的阴影效果 */
            box-shadow: inset 0 0 6px rgba(236, 236, 236, 0.1);
        }

        ::-moz-scrollbar-thumb {
            /* 深色条的背景颜色 */
            background: #007bff;
            /* 深色条的圆角 */
            border-radius: 6px;
            /* 深色条的阴影效果 */
            box-shadow: inset 0 0 6px rgba(236, 236, 236, 0.1);
        }
    </style>
</head>


<body>
    <div id="body">
        <div id="tablelist">
            <section>
                <div class="bd-callout bd-callout-warning">
                    <h5 id="conveying-meaning-to-assistive-technologies">@Html.Raw(Label.Process + Label.Equipment + Label.Bind)</h5>
                    <span>
                        <span class="badge badge-primary text-white">PROJ_CODE、PRODUCT、PROCESS</span><span class="badge badge-danger text-white">@Html.Raw(Label.Required + Label.Field + Label.And + Label.FIS + Label.Message + Label.Correlation)</span><br />
                        <span class="badge badge-primary text-white">EQUIPMENT_NAME、EQUIPMENT_ID、COMPUTER_ID</span><span class="badge badge-danger text-white">@Html.Raw(Label.Required + Label.Field)</span><br />
                        <span class="badge badge-secondary text-white">TABLE_NAME、PIC_NAME、LOCATION</span><span class="badge badge-dark text-white">@Html.Raw(Label.Non + Label.Required)</span><br />
                        <span class="badge badge-warning text-white">PROJ_CODE、PRODUCT、PROCES、EQUIPMENT_NAME、EQUIPMENT_ID、COMPUTER_ID</span><span class="badge badge-danger text-white">@Html.Raw(Label.Unite + Label.PrimaryKey + Label.And + Label.Required + Label.Non + Label.Repeat)</span>
                        <a style="float: right; margin: 0rem 0.2rem;" class='btn btn-sm btn-warning text-white' onclick='pushOracle()'><span>@Html.Raw(Label.Push + Label.Data)</span></a>
                        <a style="float: right; margin: 0rem 0.2rem; " class='btn btn-sm btn-success text-white' onclick='showAddModal(0,0)'>@Html.Raw(Label.Add)</a>
                    </span>
                </div>
                <div id="table-container" style="width:100%;">
                    <table id="example" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>PROJ_CODE</th>
                                <th>PRODUCT</th>
                                <th>PROCESS_NAME</th>
                                @*<th>TABLE_NAME</th>*@
                                <th>EQUIPMENT_NAME</th>
                                <th>EQUIPMENT_ID</th>
                                <th>COMPUTER_ID</th>
                                <th>PIC_NAME</th>
                                <th>LOCATION</th>
                                <th>@Html.Raw(Label.Operate)</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                            <tr>
                                <th>ID</th>
                                <th>PROJ_CODE</th>
                                <th>PRODUCT</th>
                                <th>PROCESS_NAME</th>
                                @*<th>TABLE_NAME</th>*@
                                <th>EQUIPMENT_NAME</th>
                                <th>EQUIPMENT_ID</th>
                                <th>COMPUTER_ID</th>
                                <th>PIC_NAME</th>
                                <th>LOCATION</th>
                                <th>@Html.Raw(Label.Operate)</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </section>
        </div>
    </div>

    <!-- 修改or新增模态框 -->
    <div class="modal fade" id="updateOrAddModal" tabindex="-1" role="dialog" aria-labelledby="updateOrAddModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateOrAddModalLabel">@Html.Raw(Label.Update+Label.Bind)</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="tableUp0rAdd">
                        <tbody>
                            <tr><td class="label">产品</td><td class="vaule"><select id="projcode"></select></td><td class="label">设备名</td><td class="vaule"><input id="equipment_name" type="text" /></td></tr>
                            <tr><td class="label">工段</td><td class="vaule"><select id="product"></select></td><td class="label">设备ID</td><td class="vaule"><input id="equipment_id" type="text" /></td></tr>
                            <tr><td class="label">工序</td><td class="vaule"><select id="process"></select></td><td class="label">电脑ID</td><td class="vaule"><input id="computer_id" type="text" /></td></tr>
                            <tr><td class="label">表名</td><td class="vaule"><input id="table_name" type="text" /></td><td class="label">负责人</td><td class="vaule"><input id="pic_name" type="text" /></td></tr>
                            <tr><td></td><td></td><td class="label">位置</td><td class="vaule"><input id="location" type="text" /></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Html.Raw(Label.Cancel)</button>
                    <button type="button" class="btn btn-primary" id="UpdateOrAddBtn">@Html.Raw(Label.Save)</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 删除模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">@Html.Raw(Label.Verify+Label.Delete)</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">@Html.Raw(Label.WantToDelete)</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Html.Raw(Label.Cancel)</button>
                    <button type="button" class="btn btn-primary" id="DeleteBtn">@Html.Raw(Label.Delete)</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        function populateSelect(selectElement, data) {
            selectElement.empty();
            //添加默认选项
            selectElement.append($('<option>', {
                value: '',
                text: '@Html.Raw(Label.PleaseSelect)'
            }));
            data.ReturnData.forEach(function (item) {
                selectElement.append($('<option>', {
                    value: item.VALUE,
                    text: item.TEXT
                }));
            });
        }

        function GetProjCode() {
            $.ajax({
                url: api + '/Dashboard/GetFisProjCode',
                type: 'POST',
                dataType: 'json',
                async: false,
                success: function (data) {
                    var projcodeSelect = $('#projcode');
                    populateSelect(projcodeSelect, data);
                    if (rowdata != null) {
                        populateSelect.val(rowdata.PROJ_CODE);
                    }
                }
            });
        }

        function GetProduct(projCode) {
            var param = {
                proj_code: projCode
            };
            $.ajax({
                url: api + '/Dashboard/GetFisProduct',
                type: 'POST',
                dataType: 'json',
                data: param,
                async: false,
                success: function (data) {
                    var productSelect = $('#product');
                    populateSelect(productSelect, data);
                    if (rowdata != null) {
                        productSelect.val(rowdata.PRODUCT);
                    }
                    $('#process').empty();
                }
            });
        }

        function GetProcess(projCode, productCode) {
            var param = {
                proj_code: projCode,
                product_code: productCode
            };
            $.ajax({
                url: api + '/Dashboard/GetFisProcess',
                type: 'POST',
                dataType: 'json',
                data: param,
                async: false,
                success: function (data) {
                    var processSelect = $('#process');
                    populateSelect(processSelect, data);
                    if (rowdata != null) {
                        processSelect.val(rowdata.PROCESS_NAME);
                    }
                }
            });
        }

        $(document).ready(function () {
            GetProjCode();
            $('#projcode').change(function () {
                var projCode = $(this).val();
                GetProduct(projCode);
                $("#product").value = "@Html.Raw(Label.PleaseSelect)";
                $("#product").val("");
                $("#process").value = "@Html.Raw(Label.PleaseSelect)";
                $("#process").val("");
            });
            $('#product').change(function () {
                var projCode = $('#projcode').val();
                var productCode = $(this).val();
                GetProcess(projCode, productCode);
                $("#process").value = "@Html.Raw(Label.PleaseSelect)";
                $("#process").val("");
            });
        });

        var tabledata;
        var getData = function () {
            return $.ajax({
                url: api + '/Dashboard/GetBindingEquipment',
                type: 'POST',
                dataType: 'json',
                //data: function (d) {
                //    //传递参数
                //    d.timeStart = $("#timeStart").val();
                //    d.timeEnd = $("#timeEnd").val();
                //},
                async: false
            });
        };
        var languageUrl = '@Html.Raw(Label.Chinese)' === 'Chinese' ? null : '/lib/datatables/media/js/Chinese.json';
        var DataTableConfig = function (result) {
            var config = {
                scrollY: '550px',
                scrollCollapse: true,
                paging: true,
                fixedHeader: true,
                //自适应
                autoWidth: false,
                //分页数
                lengthMenu: [50, 100, 300, 500],
                displayLength: 50,
                language: {
                    url: languageUrl
                },
                data: result.ReturnData,
                columns: [
                    {
                        "name": "ID",
                        "data": "ID"
                    },
                    {
                        "name": "PROJ_CODE",
                        "data": "PROJ_CODE"
                    },
                    {
                        "name": "PRODUCT",
                        "data": "PRODUCT"
                    },
                    {
                        "name": "PROCESS_NAME",
                        "data": "PROCESS_NAME"
                    },
                    @*{
                        "name": "TABLE_NAME",
                        "data": "TABLE_NAME"
                    },
                    *@
                    {
                        "name": "EQUIPMENT_NAME",
                        "data": "EQUIPMENT_NAME"
                    },
                    {
                        "name": "EQUIPMENT_ID",
                        "data": "EQUIPMENT_ID"
                    },
                    {
                        "name": "COMPUTER_ID",
                        "data": "COMPUTER_ID"
                    },
                    {
                        "name": "PIC_NAME",
                        "data": "PIC_NAME"
                    },
                    {
                        "name": "LOCATION",
                        "data": "LOCATION"
                    },
                    {
                        "name": "OPERATE",
                        "data": function (row) {
                            var html = "<table><tr>";
                            //html += "<td><a class='btn btn-sm btn-success text-white' onclick='showAddModal(" + row.ID + "," + row.INDEX_ID + ")' >@Html.Raw(Label.Add)</a></td>";
                            html += "<td><a class='btn btn-sm btn-warning text-white' onclick='showUpdateModal(" + row.ID + "," + row.INDEX_ID + ")'><span>@Html.Raw(Label.Update)</span></a></td>";
                            html += "<td><a class='btn btn-sm btn-danger text-white' onclick='showDeleteModal(" + row.ID + "," + row.INDEX_ID + ")' >@Html.Raw(Label.Delete)</a></td>";
                            html += "</tr></table>";
                            return html;
                        }
                    }
                ]
            }
            return config;
        }

        var processData = function (result) {
            tabledata = result.ReturnData;
            $('#example').DataTable(DataTableConfig(result));
        };

        $(document).ready(function () {
            getData().done(processData);
        });

        function SetBindingEquipment(param) {
            return $.ajax({
                url: api + '/Dashboard/SetBindingEquipment',
                type: 'POST',
                dataType: 'json',
                data: param,
                async: false
            });
        }

        function loaddata(result) {
            tabledata = result.ReturnData;
            //注销
            $('#example').DataTable().destroy();
            //重新渲染
            $('#example').DataTable(DataTableConfig(result)).draw(false);
            //追加
            //$('#example').DataTable(DataTableConfig(result)).rows.add(result.ReturnData).draw(true);
        }

        function showDeleteModal(row_id, index_id) {
            $('#deleteModal').modal('show');
            $('#DeleteBtn').off('click');
            $('#DeleteBtn').click(function () {
                deleteItem(row_id, index_id);
            });
        }

        function showAddModal(row_id, index_id) {
            $('#updateOrAddModalLabel').text('@Html.Raw(Label.Equipment+Label.Add)');
            $("#projcode").value = "@Html.Raw(Label.PleaseSelect)";
            $("#projcode").val("");
            $("#product").value = "@Html.Raw(Label.PleaseSelect)";
            $("#product").val("");
            $("#process").value = "@Html.Raw(Label.PleaseSelect)";
            $("#process").val("");
            $("#table_name").val("");
            $("#equipment_name").val("");
            $("#equipment_id").val("");
            $("#computer_id").val("");
            $("#pic_name").val("");
            $("#location").val("");
            $('#updateOrAddModal').modal('show');
            $('#UpdateOrAddBtn').off('click');
            $('#UpdateOrAddBtn').click(function () {
                var paramvaule = {
                    proj_code: $("#projcode").val(),
                    product: $("#product").val(),
                    process_name: $("#process").val(),
                    equipment_name: $("#equipment_name").val(),
                    equipment_id: $("#equipment_id").val(),
                    computer_id: $("#computer_id").val()
                };
                for (var key in paramvaule) {
                    if (paramvaule.hasOwnProperty(key) && paramvaule[key] === "" || paramvaule[key] === null) {
                        alert(key.toUpperCase() + "@Html.Raw(Label.IsNotEmpty)")
                        return;
                    }
                }
                paramvaule.table_name = $("#table_name").val();
                paramvaule.pic_name = $("#pic_name").val();
                paramvaule.location = $("#location").val();
                var param = {
                    type: "ADD",
                    header_key: JSON.stringify({ index_id: index_id }),
                    header_vaule: JSON.stringify(paramvaule)
                };
                $.ajax({
                    url: api + '/Dashboard/SetBindingEquipment',
                    type: 'POST',
                    dataType: 'json',
                    data: param,
                    async: false,
                    success: function (data) {
                        if (data.Success) {
                            $('#updateOrAddModal').modal('hide');
                            getData().done(loaddata);
                        }
                    }
                });
            });
        }

        var rowdata = null;
        function showUpdateModal(row_id, index_id) {
            rowdata = tabledata.find(item => item.ID === row_id && item.INDEX_ID === index_id);
            $("#projcode").val(rowdata.PROJ_CODE).trigger("change");
            $("#product").val(rowdata.PRODUCT).trigger("change");
            $("#process").val(rowdata.PROCESS_NAME).trigger("change");
            if ($("#product").val() == null ) {
                $("#product").value = "@Html.Raw(Label.PleaseSelect)";
                $("#product").val("");
            }
            if ($("#process").val() == null) {
                $("#process").value = "@Html.Raw(Label.PleaseSelect)";
                $("#process").val("");
            }
            $("#table_name").val(rowdata.TABLE_NAME);
            $("#equipment_name").val(rowdata.EQUIPMENT_NAME);
            $("#equipment_id").val(rowdata.EQUIPMENT_ID);
            $("#computer_id").val(rowdata.COMPUTER_ID);
            $("#pic_name").val(rowdata.PIC_NAME);
            $("#location").val(rowdata.LOCATION);
            $('#updateOrAddModalLabel').text('@Html.Raw(Label.Update+Label.Bind)');
            $('#updateOrAddModal').modal('show');
            $('#UpdateOrAddBtn').off('click');
            $('#UpdateOrAddBtn').click(function () {
                updateItem(row_id, index_id);
            });
        }

        function deleteItem(row_id, id) {
            var paramvaule = {
                index_id: id,
            };
            var param = {
                type: "DELETE",
                header_key: JSON.stringify(paramvaule)
            };
            var response = SetBindingEquipment(param).responseText;
            var result = JSON.parse(response);
            if (result.Success) {
                $('#deleteModal').modal('hide');
                getData().done(loaddata);
            }
        }

        function updateItem(row_id, index_id) {
            var paramvaule = {
                proj_code: $("#projcode").val(),
                product: $("#product").val(),
                process_name: $("#process").val(),
                equipment_name: $("#equipment_name").val(),
                equipment_id: $("#equipment_id").val(),
                computer_id: $("#computer_id").val()
            };
            for (var key in paramvaule) {
                if (paramvaule.hasOwnProperty(key) && paramvaule[key] === "" || paramvaule[key] === null) {
                    alert(key.toUpperCase() + "@Html.Raw(Label.IsNotEmpty)")
                    return;
                }
            }
            paramvaule.table_name = $("#table_name").val();
            paramvaule.pic_name = $("#pic_name").val();
            paramvaule.location = $("#location").val();
            var param = {
                type: "UPDATE",
                header_key: JSON.stringify({ index_id: index_id }),
                header_vaule: JSON.stringify(paramvaule)
            };
            var response = SetBindingEquipment(param).responseText;
            var result = JSON.parse(response);
            if (result.Success) {
                $('#updateOrAddModal').modal('hide');
                getData().done(loaddata);
                //alert("操作成功！");
            }
        }

        function pushOracle() {
            $.ajax({
                url: api + '/Dashboard/PushOracleEquipment',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    if (data.Success) {
                        alert("@Html.Raw(Label.Push + Label.Data)操作成功！");
                    }
                }
            });
        }

    </script>
</body>
</html>
